<template>
  <div class="page-con">
    <a-layout style="height: 100%">
      <a-layout-header>
        <page-title :has-line="false">贷款发票维护</page-title>
        <a-tabs v-model="activeKey" @change="changeKey">
          <a-tab-pane key="finishedProduct" title="成品">
            <template #title>
              <span>成品</span>
            </template>
          </a-tab-pane>
          <a-tab-pane key="rawMaterial" title="原材料/锻铸件">
            <template #title> 原材料/锻铸件 </template>
          </a-tab-pane>
          <a-tab-pane key="spareParts" title="零部件外包">
            <template #title> 零部件外包 </template>
          </a-tab-pane>
        </a-tabs>
      </a-layout-header>
      <a-layout>
        <a-layout-content
          ><query-form
            ref="queryForms"
            :component-config="formComponentConfig"
            :render-config="formRenderConfig"
            :render-keys="renderKeys"
            @search="searchHandle"
            @reset="resetHandle"
          />
          <invoiceTable
            v-if="componentKey"
            :key="componentKey"
            :active-key="activeKey"
          ></invoiceTable>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <Detail ref="detailRef"></Detail>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import queryForm from '@/common/components/query-form/index.vue';
  import pageTitle from '@/common/components/title/page-title.vue';
  import {
    formRenderConfig,
    formComponentConfig,
  } from './form-comp/invoice-form';
  import invoiceTable from './component/invoice-table.vue';

  const activeKey = ref('finishedProduct');
  const tabObj = ref({});
  const componentKey = ref(1);
  tabObj.value = {
    finishedProduct: [
      'name1',
      'name2',
      'name3',
      'name4',
      'name5',
      'name6',
      'name7',
      'name8',
      'name9',
      'name10',
      'name11',
      'name12',
    ],
  };

  const renderKeys = ref<any>([]);
  const queryForms = ref();
  const detailRef = ref();
  renderKeys.value = tabObj.value.finishedProduct;
  const changeKey = (data: any) => {
    activeKey.value = data;
    componentKey.value += 1;
  };
  const searchHandle = (data: any) => {
    console.log('search', data);
  };
  const resetHandle = (data: any) => {
    console.log('resetHandle', data);
  };
</script>

<style lang="less" scoped>
  .page-con {
    height: 100%;
    margin: 16px;
    padding: 12px 24px;
    background-color: #fff;
  }

  /deep/ .arco-radio-group-button {
    width: 100%;
  }

  /deep/ .arco-radio-button {
    width: 50%;
    color: #4e5769 !important;
    text-align: center;
  }

  /deep/ .arco-radio-button.arco-radio-checked {
    color: #1e2228 !important;
  }

  /deep/ .arco-badge-number {
    color: #1e2228;
    background-color: #e4e7ed !important;
  }

  /deep/ .arco-tabs-tab-active {
    color: #1e89ff;

    .arco-badge-number {
      color: rgb(255 255 255 / 90%);
      background-color: #1e89ff !important;
    }
  }
</style>
